<template>
  <div class="">
    <!-- :inline="true"  原本是变成两行的 label
          使用 inline 为 true 后就变成一行的
     -->
    <el-form :inline="true" :model="dataForm" :rules="rules" ref="formRef">
      <el-form-item prop="deptSubId">
        <el-cascader
            :options="options"
            :props="{
                value:'subId',
                label:'subName'
              }"
            v-model="dataForm.deptSubId"
            clearable
            @change="handleChange"
        />
      </el-form-item>

      <el-form-item prop="date">
        <!--
          editable  是否可以在日期选择器中修改内容
          -->
        <el-date-picker
            type="date"
            placeholder="请选择日期"
            style="width: 100%"
            v-model="dataForm.date"
            value-format="YYYY-MM-DD"
            :clearable="true"
            :editable="false"
            class="input"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <!-- disable 按钮是否被禁用  -->
        <el-button type="primary" @click="open" :disabled="dataForm.deptSubId==null||dataForm.date==null">添加</el-button>
      </el-form-item>


    </el-form>

    <!-- table表格  -->
    <div class="schedule">
      <!-- 表头  -->
      <div class="row">
        <div class="cell-header name">医生姓名</div>
        <!-- 遍历 -->
        <div class="cell-header time"
              v-for="(item,index) in time"
              :key="index"
        >{{item}}</div>
        <div class="cell-header operate">操作</div>
      </div>
      <!-- 遍历 -->
      <div class="row" v-for="doctor in doctors" :key="doctors.doctorId">
        <div class="cell">{{doctor.doctorName}}</div>
        <!-- 遍历 -->
        <div class="cell" v-for="(item,index) in doctor.slot">

          <!-- 文字提示 -->
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="`患者上限 ${doctor.maximum}人`"
              placement="top-start"
              v-if="item"
          >
          <span class="blue" v-if="item">√</span>
          </el-tooltip>

          <el-tooltip
              class="box-item"
              effect="dark"
              :content="`什么都没有`"
              placement="top-start"
              v-if="!item"
          >
            <span class="red" v-if="!item">空</span>

          </el-tooltip>

        </div>

        <div class="cell">
          <el-button
              type="primary"
              link
              @click="updateOpen(doctor.workPlanId)"
          >修改
          </el-button>
          <el-button
              type="danger"
              link
              @click="deletePlan(doctor.workPlanId)"
          >删除</el-button>
        </div>
      </div>
    </div>
    <DoctorfeesAddAndUpdate ref="doctorfeesRef" @queryPlan="queryDoctorPlan"></DoctorfeesAddAndUpdate>

  </div>
</template>

<script setup>
import {ref, reactive, onMounted,nextTick} from "vue";
import {selectDeptAndSub} from "@/api/dept"
import {selectDoctorPlan,deleteDoctorPlan} from "@/api/visit"
import {useRoute} from "vue-router";
import DoctorfeesAddAndUpdate from './doctorfeesAddAndUpdate/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'


// 定义组件 的实例化对象
let doctorfeesRef = ref();

// 添加 打开i对话框
const open = () => {
  nextTick(() => {

    doctorfeesRef.value.init(null,dataForm.value.deptSubId,dataForm.value.date);
  });
};


// 修改 打开对话框
const updateOpen = (workPlanId) => {
  nextTick(() => {
    doctorfeesRef.value.init(workPlanId,dataForm.value.deptSubId,dataForm.value.date);
  });
};


//删除 出诊计划方法
const deletePlan = (workPlanId) => {
  ElMessageBox.confirm(
      '确认删除词条出诊计划吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let data = {
          workPlanId: workPlanId,
        }
        let res = await deleteDoctorPlan(data);
        console.log(res);
        // 删除成功 调用查询 刷新页面
        queryDoctorPlan();
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      });
};


let dataForm = ref({
  "date": null,
  "deptSubId": null
})

let time = [
  '08:00~08:30',  // 1
  '08:30~09:00',
  '09:00~09:30',
  '09:30~10:00',
  '10:00~10:30',
  '10:30~11:00',
  '11:00~11:30',
  '11:30~12:00',
  '13:00~13:30',
  '13:30~14:00',
  '14:00~14:30',
  '14:30~15:00',
  '15:00~15:30',
  '16:00~16:30',
  '16:30~17:00',
]

let rules = reactive({
  deptSubId: [
    {required: true, message: '请选择科室部门'}
  ],
  date: [
    {required: true, message: '请选择日期'}
  ]
})

let formRef = ref();

// 在级联选择武器中 change 事件中 对 dataForm 中的 deptSubId 做数据处理
const handleChange = (val) => {
  console.log('val', val)
  // console.log('id', dataForm.value.deptSubId)

  // 接口要的参数是 一个 id 接收到的 deptSubId 是一个数组  要改变格式
  if (val !== null) {
    dataForm.value.deptSubId = val[1];
  } else {
    dataForm.value.deptSubId = null;
  }
};


let doctors = ref([]);

// 查询医生出诊时段
const queryDoctorPlan = async () => {
  // 这个每次重复查询就会将 dataForm 中的数据改变  不能进行第二次查询
  // dataForm.value.deptSubId = dataForm.value.deptSubId[1];
  let res = await selectDoctorPlan(dataForm.value);
  console.log(res);
  doctors.value = res.result;
};

let options = ref([]);

const getDeptAndSub = async () => {
  let res = await selectDeptAndSub();

  // console.log(res)
  let attArr = Object.keys(res.result);

  options.value = attArr.map((item, index) => {
    return {
      subId: item,
      subName: item,
      children: res.result[item]
    };
  })
  // console.log(res.result)
  // console.log(attArr)
  // console.log(options.value)
};

// 路由信息对象 获取路由参数的
let route = useRoute();

// 页面初始化时 接受路参数
onMounted(() => {
  getDeptAndSub();
  console.log(route);

  // 接受路由参数
  let deptName = route.params.deptName;
  let deptSubId = Number(route.params.deptSubId);
  let date = route.params.date;

  // 如果不双击 直接点路由跳转  判断 然会赋值为null 在渲染
  if (deptName == ':deptName' || deptSubId == ':deptSubId' || date == ':date') {
    dataForm.value.date = null;
    dataForm.value.deptSubId = null;
    return;
  }

  dataForm.value.date = date;

  // 这个 怎么感觉 莫名其妙的就错了 还要我改一下才能用
  // dataForm.value.deptSubId = [deptName,deptSubId];
  dataForm.value.deptSubId = deptSubId;
  queryDoctorPlan();
})

// 查询方法
const search = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      queryDoctorPlan();
    } else {
      console.log('校验失败!', fields)
    }
  })
}

</script>

<style lang="scss" scoped>
.schedule {
  display: table;  /*display: table; 是一个CSS属性值，它允许你将一个非表格元素（如 <div>、<span> 等）表现得像一个HTML表格
                  元素（<table>）。这个属性主要用于布局目的，尤其是在需要创建类似于表格结构的布局时，但不想使用真正的 <table> 元素。*/
  width: 100%;
  border: 1px solid #e0e0e0;
  border-collapse: collapse; // 确保单元格边框之间没有间隙
  border-spacing: 0;

  .row {
    display: table-row;
    /*display: table-row; 是CSS的一个属性值，它用于将一个元素呈现为HTML表格中的行（<tr>）的行为。这通常与display: table;（用于模拟整个表格）和
      display: table-cell;（用于模拟表格单元格）一起使用，以创建一个不使用传统的<table>, <tr>, 和 <td> 标签的表格布局。*/
    &:first-child {
      background-color: #6f768e !important;
      color: #fff;
    }

    &:nth-child(odd) {
      background-color: #f5f5f5;
    }

    .cell-header {
      display: table-cell;
      text-align: center;
      height: 38px;
      border: 1px solid #e0e0e0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
      vertical-align: middle;
      color: black;
    }

    .name {
      width: 130px;
    }

    .time {
      text-align: center;
      font-size: 12px;
    }

    .operate {
      display: table-cell;
      text-align: center;
      height: 38px;
      width: 105px;
    }

    .cell {
      display: table-cell;
      text-align: center;
      height: 36px;
      border: 1px solid #e0e0e0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
      vertical-align: middle;
      font-size: 14px;

    }
  }
}

.blue {
  color: #409EFF;
  font-size: 18px;
  cursor: pointer;
  user-select: none;  // 不能选中
}

.red {
  color: #f56c6c;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}


</style>